
import {Shape} from './shape.js';
window.onload = ()=>{
    function getId(str){
        return document.getElementById(str)
    }
    let control = getId('control')
    let btn = getId('btn')
    btn.addEventListener('click', event=>{control.classList.toggle('sidebar')}, false)

    let canvas = document.getElementById('canvas'),
    ctx = canvas.getContext('2d'),
    w = canvas.width = window.innerWidth,
    h = canvas.height = window.innerHeight,
    gridY = 7,
    gridX = 7,
    type = 'ball',
    word = null
    let msg = getId('msg'),
        gravity = getId('gravity'),
        duration = getId('duration'),
        speed = getId('speed'),
        radius = getId('radius'),
        resolution = getId('resolution')

    let graVal = parseFloat(gravity.value),
        durVal = parseFloat(duration.value),
        spdVal = parseFloat(speed.value),
        radVal = parseFloat(radius.value),
        resVal = parseFloat(resolution.value),
        text = msg.value
    

    window.change = function(){
        ctx.clearRect(0, 0, canvas.width, canvas.height)
        gridX = parseFloat(resolution.value);
        gridY = parseFloat(resolution.value);
        graVal = parseFloat(gravity.value),
        durVal = parseFloat(duration.value),
        spdVal = parseFloat(speed.value),
        radVal = parseFloat(radius.value),
        resVal = parseFloat(resolution.value),
        text = msg.value
        word = new Shape(w/2, h/2, text,{
            graVal, durVal, spdVal, radVal, resVal, ctx, gridY, gridX, w, h
        })
        word.getValue();
    }
    change()
    function draw(){
        requestAnimationFrame(draw, canvas)
        ctx.clearRect(0, 0, w, h)
        for(let i = 0; i < word.placement.length; i ++){
            word.placement[i].update()
        }
    }
    draw()
}